<template>
    <el-container id="main">
        <el-row class="top">
            <el-row>
                <el-col class="title"><h1>我做了一个可以锻炼视力的 App</h1></el-col>
                <el-col><span>11个月前发布,7756人读过</span></el-col>
            </el-row>
        </el-row>

        <el-row class="middle">
            <el-row class="section-text">没错，我做了一个新 App，可以帮助你放松眼睛、缓解屏幕疲劳，甚至改善视力。</el-row>  
            <el-row class="section-text">说实话，要不是因为这次疫情，估计打死我也想不到会做个这样的 App。</el-row>
            <el-row class="section-text">本来我视力一直都挺好的，也许是因为我常年在外旅行摄影，即使在家也保证每天都有户外运动，所以每天平均下来的屏幕时间并不多。没想到疫情一来，不仅旅行计划全部取消，整个生活节律都被打乱了。居家隔离期间，屏幕看得越来越多，没几天就明显感觉到视力有下降的趋势。</el-row>
            <el-row class="section-text">有天和一位眼科医生朋友聊起这事，他建议我每天做几次眼保健操，坚持一段时间会有好转。我做了几天之后，确实有些效果，不过也遇到了三个问题：</el-row>
            <el-row class="section-text">
                <ol>
                    <li>总是想不起来要做；</li>
                    <li>经常遗漏具体步骤；</li>
                    <li>无法确认动作是否到位。</li>
                </ol>
            </el-row>
            <el-row class="section-text">正常人遇到这种情况设个备忘录就行，但我属于爱瞎折腾的人，加上宅在家也是闲着，不如做个 App 来督促一下自己吧。</el-row>
            <el-row class="section-text"></el-row>
        </el-row>


        <el-row class="footer">
            <el-row class="img-box">
                <el-col>
                    <img src="../assets/hover.jpg" alt="">
                    <p>阅读下一篇博文</p>
                </el-col>
            </el-row>

            <el-row class="bottom-box" >
                <el-col class="footer-bottom" >
                    <el-card shadow="hover" class="box-card">
                        <h5>摄影十年</h5>
                        <p>即将过去的 2018 是我开始学习摄影的第十年，是时候回顾一下自己的摄影历程了，同时分享我的新年新计划。</p>
                    </el-card>
                </el-col>
            </el-row>
            
        </el-row>
    </el-container>
</template>

<script>
import { defineComponent,getCurrentInstance } from 'vue'
import { useRoute}  from 'vue-router'
export default defineComponent({
    name:'ArticleDetail',
    setup(props,){
        const  { ctx } = getCurrentInstance()
        console.log(ctx.$root.$route.params.id) 
        const router = useRoute()
        console.log(router.params.id)       
    }
})
</script>

<style lang="less" scoped>
#main{
    display: flex;
    flex-direction: column;
    padding: 4%;
    transition: all 4s ease 0s;
    .top{
        h1{ 
            margin-top: 30px;
            color: #333;
            font-size: 38px;
            font-weight: bold;
            line-height: 1.5;
        }
        span{
            margin-bottom: 10px;
            display: inline-block;
            color: #888;
            font-size: 13px;
        }
    }

    .middle{
        color: rgba(0,0,0,0.6);
        .section-text{
            margin-bottom: 15px;
        }
        ol{
            margin-left: 40px;
        }
    }

    .footer{
        .img-box{
            margin: auto;
            text-align: center;

            p{
                margin: 20px 0px;
            }
        }

        .bottom-box{
            margin: auto;
            .footer-bottom{
                margin: auto;
                h5{
                    font-size: 20px;
                    margin-bottom: 10px;
                }

                p{
                    font-size: 12px;
                    line-height: 1.35;
                    color: rgba(0,0,0,0.6);
                }
            }
        }
    }
}
</style>